<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>神码科技</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/animate.css">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">
                <img src="img/bs.gif" alt="logo" class="img-responsive">
            </a>
        </div>
        <div class="collapse navbar-collapse navbar-right">
            <ul class="nav navbar-nav">
                <li><a href="#home">首页</a></li>
                <li><a href="#bbs">论坛</a></li>
                <li><a href="#html">前端开发</a></li>
                <li><a href="#course">最新课程</a></li>
                <li><a href="#app">移动APP</a></li>
                <li><a href="#me">联系我们</a></li>
            </ul>
            <a href="back/index.html" class="back">进入后台</a>
        </div>
    </div>
</div>
<section id="home">
    <div class="filter">
        <div class="container">
            <div class="row wow bounceInDown">
                <div class="col-md-1"></div>
                <div class="col-md-10">
                    <h1>Bootstrap实战课程等你来战！</h1>
                    <p>本套课程适用于：1.WEB开发人员；2.网站维护人员、管理人员<br/>
                        培训技能的目标：使用Bootstrap框架快速构建响应式网页，颠覆传统WEB前端！</p>
                    <img src="img/php.jpg" alt="php" class="img-responsive">
                </div>
                <div class="col-md-1"></div>
            </div>
        </div>
    </div>
</section>
<section id="bbs">
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-sm-4 wow bounceInLeft">
                <a href="#">
                    <img src="img/a.png" alt="android" class="img-responsive">
                    <h3>Android开发</h3>
                    <p>Android开发技术交流、问题求助、实战分享</p>
                </a>
            </div>
            <div class="col-md-4 col-sm-4 wow bounce">
                <a href="#">
                    <img src="img/b.png" alt="ios" class="img-responsive">
                    <h3>IOS开发</h3>
                    <p>iOS开发技术交流，海量iOS实战干货分享</p>
                </a>
            </div>
            <div class="col-md-4 col-sm-4 wow bounceInRight">
                <a href="#">
                    <img src="img/i.png" alt="嵌入式" class="img-responsive">
                    <h3>嵌入式底层开发</h3>
                    <p>底层嵌入式开发、实战案例等技术交流讨论</p>
                </a>
            </div>
        </div>
    </div>
</section>
<section id="html">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-sm-6 wow fadeInLeftBig">
                <h2>HTML5前端开发</h2>
                <p>一线资深前端开发工程师倾情打造！助你完成普通程序员到优秀工程师的华丽升级！</p>
                <p><i class="glyphicon glyphicon-grain"></i>使用HTML5与CSS3技术轻松实现设备自适应展示。</p>
                <p><i class="glyphicon glyphicon-grain"></i>清晰明了的语义代码结构，更高的可读性、更利于页面维护的。</p>
            </div>
            <div class="col-md-6 col-sm-6 wow fadeInRightBig">
                <img src="img/html5.jpg" alt="html5" class="img-responsive">
            </div>
        </div>
    </div>
</section>
<section id="bootstrap">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-sm-6 wow rotateInDownLeft">
                <img src="img/Bootstrap.jpg" alt="bootstrap" class="img-responsive">
            </div>
            <div class="col-md-6 col-sm-6 wow rotateInDownRight">
                <h2>Bootstrap实战视频教程</h2>
                <p>Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
                <p><i class="glyphicon glyphicon-grain mai-icon"></i>你的网站和应用能在 Bootstrap 的帮助下通过同一份代码快速、有效适配手机、平板、PC 设备。</p>
                <p><i class="glyphicon glyphicon-grain mai-icon"></i>Bootstrap 提供了全面、美观的文档。你能在这里找到关于 HTML 元素、HTML 和 CSS 组件、jQuery 插件方面的所有详细文档。</p>
            </div>
        </div>
    </div>
</section>
<section id="course">
    <div class="container wow fadeIn" data-wow-delay="0.5s">
        <div class="row">
            <div class="col-md-12 col-sm-12">
                <h2>最新课程</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3 col-sm-4">
                <div class="row">
                    <div class="col-md-12 col-sm-12">
                        <img src="img/swift.jpg" alt="sw" class="img-responsive">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3 col-sm-3"></div>
                    <div class="col-md-6 col-sm-6">
                        <a href="#" role="button">加入学习</a>
                    </div>
                    <div class="col-md-3 col-sm-3"></div>
                </div>
            </div>
            <div class="col-md-3 col-sm-4">
                <div class="row">
                    <div class="col-md-12 col-sm-12">
                        <img src="img/swift.jpg" alt="sw" class="img-responsive">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3 col-sm-3"></div>
                    <div class="col-md-6 col-sm-6">
                        <a href="#" role="button">加入学习</a>
                    </div>
                    <div class="col-md-3 col-sm-3"></div>
                </div>
            </div>
            <div class="col-md-3 col-sm-4">
                <div class="row">
                    <div class="col-md-12 col-sm-12">
                        <img src="img/swift.jpg" alt="sw" class="img-responsive">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3 col-sm-3"></div>
                    <div class="col-md-6 col-sm-6">
                        <a href="#" role="button">加入学习</a>
                    </div>
                    <div class="col-md-3 col-sm-3"></div>
                </div>
            </div>
            <div class="col-md-3 col-sm-4">
                <div class="row">
                    <div class="col-md-12 col-sm-12">
                        <img src="img/swift.jpg" alt="sw" class="img-responsive">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3 col-sm-3"></div>
                    <div class="col-md-6 col-sm-6">
                        <a href="#" role="button">加入学习</a>
                    </div>
                    <div class="col-md-3 col-sm-3"></div>
                </div>
            </div>
            <div class="col-md-3 col-sm-4">
                <div class="row">
                    <div class="col-md-12 col-sm-12">
                        <img src="img/swift.jpg" alt="sw" class="img-responsive">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3 col-sm-3"></div>
                    <div class="col-md-6 col-sm-6">
                        <a href="#" role="button">加入学习</a>
                    </div>
                    <div class="col-md-3 col-sm-3"></div>
                </div>
            </div>
            <div class="col-md-3 col-sm-4">
                <div class="row">
                    <div class="col-md-12 col-sm-12">
                        <img src="img/swift.jpg" alt="sw" class="img-responsive">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3 col-sm-3"></div>
                    <div class="col-md-6 col-sm-6">
                        <a href="#" role="button">加入学习</a>
                    </div>
                    <div class="col-md-3 col-sm-3"></div>
                </div>
            </div>
            <div class="col-md-3 col-sm-4">
                <div class="row">
                    <div class="col-md-12 col-sm-12">
                        <img src="img/swift.jpg" alt="sw" class="img-responsive">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3 col-sm-3"></div>
                    <div class="col-md-6 col-sm-6">
                        <a href="#" role="button">加入学习</a>
                    </div>
                    <div class="col-md-3 col-sm-3"></div>
                </div>
            </div>
            <div class="col-md-3 col-sm-4">
                <div class="row">
                    <div class="col-md-12 col-sm-12">
                        <img src="img/swift.jpg" alt="sw" class="img-responsive">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3 col-sm-3"></div>
                    <div class="col-md-6 col-sm-6">
                        <a href="#" role="button">加入学习</a>
                    </div>
                    <div class="col-md-3 col-sm-3"></div>
                </div>
            </div>
        </div>
    </div>
</section>
<section id="app">
    <div class="container">
        <div class="row wow zoomIn">
            <div class="col-md-6 col-sm-6">
                <div class="col-md-12 col-sm-12">
                    <h2>移动APP下载</h2>
                    <p>全新UI交互，与新网站数据同步，更加丰富的课程，开启精彩无限，语音搜索课程，喊出你想要的课程，一件收藏，方便自己重复学习，离线下载课程，在哪儿都能开！</p>
                </div>
                <div class="col-md-3 col-sm-4">
                    <a href="#" role="button">iPhone版</a>
                </div>
                <div class="col-md-3 col-sm-4">
                    <a href="#" role="button">Android版</a>
                </div>
            </div>
            <div class="col-md-6 col-sm-6">
                <img src="img/app-banner.jpg" alt="app" class="img-responsive">
            </div>
        </div>
    </div>
</section>
<section id="me">
    <div class="filter">
        <div class="container">
            <div class="row wow bounceInUp">
                <div class="col-md-6 col-sm-6">
                    <div class="row">
                        <h2 class="col-md-12"><i></i>联系我</h2>
                        <p class="col-md-12">四川神码IT学院是四川神码信息技术有限公司旗下一个IT在线教育平台，目前已有30万注册用户，10万以上APP下载量，5000小时视频内容。 我们从不说空话，专注于IT在线教育，脱离传统教育的束缚，让你走哪学哪，想学就学。逗比的老师，贴心的助教，在这儿你能感受到来自五湖四海伙伴们热情和踏实的学习态度！</p>
                        <p class="col-md-12">地址:四川成都高新区科技园(西区)2号南配楼</p>
                        <p class="col-md-12">联系电话：0371-61171272</p>
                        <p class="col-md-12">邮箱:sm@163.com</p>
                    </div>
                </div>
                <div class="col-md-6 col-sm-6">
                    <div class="row">
                        <div class="col-md-6">
                            <input type="text" class="col-md-12" placeholder="您的姓名">
                        </div>
                        <div class="col-md-6">
                            <input type="text" class="col-md-12" placeholder="您的邮箱">
                        </div>
                        <div class="col-md-12">
                            <input type="text" class="col-md-12" placeholder="标题">
                        </div>
                        <div class="col-md-12">
                            <textarea cols="30" rows="5" class="col-md-12" placeholder="留言内容"></textarea>
                        </div>
                        <div class="col-md-8">
                            <input type="button" class="col-md-12" value="提交">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section id="footer">
    <p>Copyright © 2012-2016  www.lstedu.com  神码科技 蜀ICP备09018548号  版权所有</p>
</section>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/jquery.singlePageNav.min.js"></script>
<script src="js/index.js"></script>
</html>